<script setup lang="ts">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { appInfoRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { usePublicHooks } from "../../hooks";
import IconSelect from "@/components/ReIcon/src/Select.vue";
import { getRolesList } from "@/api/application";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    higherDeptOptions: [],
    appImage: "",
    appName: "",
    appClass: "",
    appDescript: "",
    appSort: 1,
    isShow: 1,
    appRange: "",
    addUser: 0,
    addTime: "2024-1-1",
    appType: 1,
    appPath: "",
    isWebShow: false,
    isPhoneShow: false,
    isIndexShow: false
  })
});

const sexOptions = [
  {
    value: "/dataList/index",
    label: "列表模型"
  },
  {
    value: "/newsList/index",
    label: "新闻模型"
  },
  {
    value: "/proxyData/index",
    label: "指标模型"
  },
  {
    value: "/proxyList/index",
    label: "指标填报"
  },
  {
    value: "/DataView/showView",
    label: "看板模型"
  },
  {
    value: "/singletableView/index",
    label: "单表模型"
  },
  {
    value: "/doubletableView/index",
    label: "多表模型"
  },
  {
    value: "/wenjuanView/index",
    label: "问卷模型"
  },
  {
    value: "/examView/index",
    label: "试卷模型"
  }
];

const optionsd = ref([]);
onMounted(async () => {
  const Result = await getRolesList();
  optionsd.value = Result.result;
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="appInfoRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="应用名称" prop="appName">
          <el-input
            v-model="newFormInline.appName"
            clearable
            placeholder="请输入应用名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="应用图标" prop="appImage">
          <IconSelect v-model="newFormInline.appImage" />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="所属类别" prop="appClass">
          <el-cascader
            class="w-full"
            v-model="newFormInline.appClass"
            :options="newFormInline.higherDeptOptions"
            :props="{
              value: 'id',
              label: 'className',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            filterable
            placeholder="请选择所属类别"
          >
            <template #default="{ node, data }">
              <span>{{ data.className }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="是否启用">
          <el-switch
            v-model="newFormInline.isShow"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="应用排序">
          <el-input-number
            v-model="newFormInline.appSort"
            :min="0"
            :max="9999"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="应用模型" prop="appPath">
          <el-select
            v-model="newFormInline.appPath"
            placeholder="请选择源表类型"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in sexOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="显示设置">
          <el-checkbox
            v-model="newFormInline.isWebShow"
            label="PC端显示"
            value="1"
            size="large"
          />
          <el-checkbox
            v-model="newFormInline.isPhoneShow"
            label="移动端显示"
            size="large"
            value="1"
          />
          <el-checkbox
            v-model="newFormInline.isIndexShow"
            label="首页显示"
            size="large"
            value="1"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="可见范围" prop="appRange">
          <el-select
            v-model="newFormInline.appRange"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="10"
            filterable
            placeholder="请选择使角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in optionsd"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="应用简介">
          <el-input
            v-model="newFormInline.appDescript"
            aria-placeholder="应用简介内容"
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
